<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
	<header style="padding: 5px">
		<h2>通用验证规则生成-辅助</h2>
	</header>

	<div class="form">
		<form id="form">
		<ul id="flist">
			<!-- eg:
			<li id="a1">
				<select name="1_type" class="validType" onchange="validUtil.setType('#a1',this)">
					<option>--验证类型--</option>
				</select>
				<input type="text" name="1_field" onchange="validUtil.setField('#a1',this)" class="fieldName" placeholder="字段名"><br>
				其他参数
				<div class="params">
				</div>
			</li>
		-->
		</ul>
		</form>

		<script id="addtmp" type="text/html">
			<li id="a{{i}}">
				<select name="{{i}}_type" class="validType" onchange="validUtil.setType('#a{{i}}',this)">
					<option>--验证类型--</option>
					<option value="{{list.k}}" render="list" data="validlist">{{list.name}}</option>
				</select>
				<input type="text" name="{{i}}_field" onchange="validUtil.setField('#a{{i}}',this)" class="fieldName" placeholder="字段名"><br>
				其他参数
				<div class="params">
				</div>
			</li>
		</script>

		<button onclick="validUtil.add()">添加</button>
		<button onclick="validUtil.post()">生成</button>

		<div>生成结果</div>
		<textarea id="result">
			
		</textarea>

	</div>

	<script src="/component/jquery.min.js"></script>
	<?php 
		$validlist = json_encode($validlist);
	?>
	<script type="text/javascript">
		var validlist = {$validlist|raw};
		var validUtil = {};
		validUtil.autoId = 1;
		validUtil.setType = function(conId,obj){
			var _type = $(obj).val();
			if(typeof validlist[_type] == 'undefined'){
				console.log('类型不存在!');
				return false;
			}
			console.log(validlist[_type]);
			var params = validlist[_type].params;
			var con = $(conId).find('.params');
			con.html('');
			var tmp = '';

			for(i in params){
				tmp = validUtil.tmpRender(params[i].tmp,{"i":this.autoId})
				con.append(tmp);
			}
		}
		validUtil.setField = function(conId,obj){
			
		}
		validUtil.add = function(){
			this.autoId++;
			var tmp = $('#addtmp').html();
			tmp = validUtil.tmpRender(tmp,{"i":this.autoId,"validlist":validlist});
			$('#flist').append(tmp)
		}
				//模板渲染
		validUtil.tmpRender = function(tmp,data){
			for(i in data){
				//console.log(i)
				var reg = new RegExp("{{"+i+"}}", "g" )
				tmp = tmp.replace(reg, data[i]);
			}
			par = tmp;
			xtmp = $(tmp);
			var tlist = xtmp.find('*[render="list"]');
			console.log('len:',)
			for(var ii=0;ii < tlist.length;ii++){
				
				// item = $(tlist[i]).parent();
				//console.log(item.html());
				var xitem = $(tlist[ii]);
				var data_name = xitem.attr('data');
				var par = xitem.parent();
				console.log(data_name);
				
				for(i in data){
					if(i == data_name){
						
						//xitem.replaceAll(itmp);
						xtmp.find(tlist[ii]).replaceWith(function(){
							return itmp = validUtil.tmpRenderlist(xitem.prop("outerHTML"),data[i]);
							
						});
						console.log(xtmp.html());
					}
				}
				
			}
			//console.log(xtmp.html());
			
			return xtmp.prop("outerHTML");
		}
		validUtil.tmpRenderlist = function(tmp,data){
			var ctmp = tmp;
			var alltmp = [];
			for(i in data){
				ctmp = tmp;
				console.log(ctmp);
				for(ii in data[i]){
					//console.log(ii)
					var reg = new RegExp("{{list."+ii+"}}", "g" )
					ctmp = ctmp.replace(reg, data[i][ii]);
					
				}
				alltmp.push(ctmp);
			}
			console.log(ctmp);
			return alltmp.join('');
		}
		validUtil.post = function(){
			var data = $('#form').serialize();
			$.post('/validatex/post',data,function(res){
				$('#result').html(res);
			})
		}
	</script>
</body>
</html>